<%@ page language="java" contentType="text/html; charset=utf-8"
     pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>person list</title>
        
        <script src="../assets/jquery/jquery-1.9.1.min.js"></script>
        
        <style type="text/css">
        	td{text-align:center;width:80px;}
        </style>
        
    </head>
    <body>
    	<h1>${pd.title }</h1>
        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <c:forEach items="${persons}" var="person">
                <tr>
                    <td>${person.name }</td>
                    <td>${person.age }</td>
                </tr>
            </c:forEach>
        </table>
        <h5>总条数：${pd.total }</h5>
        <button onclick="getPersonData()">ajax获取后台数据</button>
        
        <div id="ajax_data">
        	
        </div>
        
        <script type="text/javascript">
        	var basePath="<%=basePath %>";
        	function getPersonData(){
        		$.ajax({
        			url:basePath+"/person/showPersonG",
        			type:"post",
        			dataType:"json",
        			success:function(data){
        				console.log(data);
        				
        				$("#ajax_data").text(data[0].name);
        			},
        			error:function(data){
        				console.log(data);
        			}
        			
        		});
        	}
        
        </script>
        
    </body>
</html>